<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作品创作 - 古韵新境</title>
    <!-- 外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        ink: '#333333',
                        cinnabar: '#c41e3a',
                        rice: '#f5f2ea',
                        lightink: '#666666',
                        paper: '#f9f6f0',
                    },
                    fontFamily: {
                        song: ['"Noto Serif SC"', 'serif'],
                        kai: ['"Noto Serif SC"', 'serif'],
                        sans: ['"Noto Sans SC"', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
            }
            .bg-paper-texture {
                background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d1cdc7' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
            }
            .scroll-reveal {
                opacity: 0;
                transform: translateY(20px);
                transition: opacity 0.6s ease, transform 0.6s ease;
            }
            .scroll-reveal.active {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body class="bg-paper bg-paper-texture text-ink font-sans">
    <!-- 导航栏 -->
    <header class="fixed top-0 left-0 w-full bg-paper/90 backdrop-blur-sm z-50 shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-4">
            <div class="flex items-center justify-between">
                <!-- Logo -->
                <a href="index.html" class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-cinnabar flex items-center justify-center">
                        <span class="text-rice font-kai text-xl">古</span>
                    </div>
                    <span class="ml-2 text-xl font-song font-bold">古韵新境</span>
                </a>
                
                <!-- 桌面导航 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="index.html" class="font-song hover:text-cinnabar transition-colors duration-300">首页</a>
                    <a href="poems.html" class="font-song hover:text-cinnabar transition-colors duration-300">诗境</a>
                    <a href="classics.html" class="font-song hover:text-cinnabar transition-colors duration-300">典籍</a>
                    <a href="interactive.html" class="font-song hover:text-cinnabar transition-colors duration-300">互动</a>
                    <a href="creation.html" class="font-song text-cinnabar border-b-2 border-cinnabar pb-1">创作</a>
                    <a href="about.html" class="font-song hover:text-cinnabar transition-colors duration-300">关于</a>
                    <button class="bg-cinnabar text-rice px-5 py-2 rounded-full hover:bg-opacity-90 transition-all duration-300 transform hover:scale-105">
                        登录 / 注册
                    </button>
                </nav>
                
                <!-- 移动端菜单按钮 -->
                <button id="menu-toggle" class="md:hidden text-ink text-2xl">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
            
            <!-- 移动端菜单 -->
            <div id="mobile-menu" class="md:hidden hidden bg-paper absolute top-full left-0 w-full shadow-lg animate-fade-in">
                <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
                    <a href="index.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">首页</a>
                    <a href="poems.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">诗境</a>
                    <a href="classics.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">典籍</a>
                    <a href="interactive.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">互动</a>
                    <a href="creation.html" class="font-song py-2 border-b border-gray-200 text-cinnabar">创作</a>
                    <a href="about.html" class="font-song py-2 hover:text-cinnabar">关于</a>
                    <button class="bg-cinnabar text-rice px-5 py-3 rounded-full hover:bg-opacity-90 transition-all duration-300">
                        登录 / 注册
                    </button>
                </div>
            </div>
        </div>
    </header>

    <main class="pt-24 pb-16">
        <!-- 页面标题 -->
        <section class="container mx-auto px-4 mb-12">
            <div class="scroll-reveal">
                <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-song font-bold mb-2">作品创作</h1>
                <p class="text-lightink max-w-2xl">挥洒笔墨，创作属于你的古典诗词作品，传承文化之美</p>
            </div>
        </section>
        
        <!-- 创作区域 -->
        <section class="container mx-auto px-4 mb-16">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- 创作表单 -->
                <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6 md:p-8 scroll-reveal">
                    <h2 class="text-xl md:text-2xl font-song font-bold mb-6">创作新作品</h2>
                    
                    <form id="creation-form" class="space-y-6">
                        <div>
                            <label for="work-title" class="block text-ink font-song mb-2">作品标题</label>
                            <input type="text" id="work-title" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cinnabar/50 focus:border-cinnabar transition-colors" placeholder="请输入作品标题">
                        </div>
                        
                        <div>
                            <label for="work-type" class="block text-ink font-song mb-2">作品类型</label>
                            <select id="work-type" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cinnabar/50 focus:border-cinnabar transition-colors">
                                <option value="shi">诗</option>
                                <option value="ci">词</option>
                                <option value="qu">曲</option>
                                <option value="fu">赋</option>
                                <option value="prose">散文</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="work-content" class="block text-ink font-song mb-2">作品内容</label>
                            <div class="flex border border-gray-300 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-cinnabar/50 focus-within:border-cinnabar transition-colors">
                                <div class="bg-gray-50 px-3 py-2 border-r border-gray-300 flex flex-col">
                                    <button type="button" class="text-lightink hover:text-cinnabar py-1 transition-colors" title="五言绝句">
                                        <i class="fa fa-file-text-o"></i> 五绝
                                    </button>
                                    <button type="button" class="text-lightink hover:text-cinnabar py-1 transition-colors" title="七言绝句">
                                        <i class="fa fa-file-text-o"></i> 七绝
                                    </button>
                                    <button type="button" class="text-lightink hover:text-cinnabar py-1 transition-colors" title="五言律诗">
                                        <i class="fa fa-file-text-o"></i> 五律
                                    </button>
                                    <button type="button" class="text-lightink hover:text-cinnabar py-1 transition-colors" title="七言律诗">
                                        <i class="fa fa-file-text-o"></i> 七律
                                    </button>
                                    <button type="button" class="text-lightink hover:text-cinnabar py-1 transition-colors" title="词牌选择">
                                        <i class="fa fa-th-large"></i> 词牌
                                    </button>
                                </div>
                                <textarea id="work-content" rows="12" class="flex-1 px-4 py-3 focus:outline-none resize-none" placeholder="请在此处创作你的作品..."></textarea>
                            </div>
                            <div class="flex justify-between mt-2 text-sm text-lightink">
                                <span id="char-count">0 字</span>
                                <span>请使用中文标点符号</span>
                            </div>
                        </div>
                        
                        <div>
                            <label for="work-notes" class="block text-ink font-song mb-2">注释与赏析 (可选)</label>
                            <textarea id="work-notes" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cinnabar/50 focus:border-cinnabar transition-colors" placeholder="请输入作品注释或赏析..."></textarea>
                        </div>
                        
                        <div class="flex flex-wrap gap-4">
                            <button type="button" class="border border-ink text-ink px-6 py-3 rounded-full hover:bg-ink hover:text-rice transition-all duration-300 font-song">
                                保存草稿
                            </button>
                            <button type="submit" class="bg-cinnabar text-rice px-8 py-3 rounded-full hover:bg-opacity-90 transition-all duration-300 font-song transform hover:scale-105">
                                发布作品 <i class="fa fa-paper-plane ml-2"></i>
                            </button>
                        </div>
                    </form>
                </div>
                
                <!-- 创作提示与帮助 -->
                <div class="space-y-6">
                    <!-- 创作指南 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 scroll-reveal">
                        <h3 class="text-lg font-song font-bold mb-4 flex items-center">
                            <i class="fa fa-lightbulb-o text-cinnabar mr-2"></i> 创作指南
                        </h3>
                        <ul class="space-y-3 text-lightink">
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-cinnabar mt-1 mr-2"></i>
                                <span>诗词创作可遵循平仄格律，也可自由发挥</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-cinnabar mt-1 mr-2"></i>
                                <span>词牌选择后将提供相应格律参考</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-cinnabar mt-1 mr-2"></i>
                                <span>作品将经过审核后发布，请勿涉及敏感内容</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-cinnabar mt-1 mr-2"></i>
                                <span>优质作品有机会入选首页推荐</span>
                            </li>
                        </ul>
                        <a href="#" class="inline-block mt-4 text-cinnabar hover:underline">查看详细创作指南 <i class="fa fa-angle-right ml-1"></i></a>
                    </div>
                    
                    <!-- 格律检测工具 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 scroll-reveal">
                        <h3 class="text-lg font-song font-bold mb-4 flex items-center">
                            <i class="fa fa-line-chart text-cinnabar mr-2"></i> 格律检测
                        </h3>
                        <p class="text-lightink mb-4">检测诗词的平仄、押韵等格律要素</p>
                        <button class="w-full border border-cinnabar text-cinnabar px-4 py-2 rounded-lg hover:bg-cinnabar hover:text-rice transition-all duration-300">
                            开始检测 <i class="fa fa-magic ml-1"></i>
                        </button>
                    </div>
                    
                    <!-- 推荐主题 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 scroll-reveal">
                        <h3 class="text-lg font-song font-bold mb-4 flex items-center">
                            <i class="fa fa-bookmark-o text-cinnabar mr-2"></i> 推荐主题
                        </h3>
                        <div class="flex flex-wrap gap-2">
                            <span class="px-3 py-1 bg-paper rounded-full text-sm hover:bg-cinnabar hover:text-rice cursor-pointer transition-colors"># 春日即景</span>
                            <span class="px-3 py-1 bg-paper rounded-full text-sm hover:bg-cinnabar hover:text-rice cursor-pointer transition-colors"># 思乡</span>
                            <span class="px-3 py-1 bg-paper rounded-full text-sm hover:bg-cinnabar hover:text-rice cursor-pointer transition-colors"># 送别</span>
                            <span class="px-3 py-1 bg-paper rounded-full text-sm hover:bg-cinnabar hover:text-rice cursor-pointer transition-colors"># 咏史</span>
                            <span class="px-3 py-1 bg-paper rounded-full text-sm hover:bg-cinnabar hover:text-rice cursor-pointer transition-colors"># 山水</span>
                            <span class="px-3 py-1 bg-paper rounded-full text-sm hover:bg-cinnabar hover:text-rice cursor-pointer transition-colors"># 边塞</span>
                            <span class="px-3 py-1 bg-paper rounded-full text-sm hover:bg-cinnabar hover:text-rice cursor-pointer transition-colors"># 哲理</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 优秀作品展示 -->
        <section class="container mx-auto px-4 mb-16">
            <div class="flex justify-between items-end mb-8 scroll-reveal">
                <div>
                    <h2 class="text-2xl md:text-3xl font-song font-bold mb-2">优秀创作作品</h2>
                    <p class="text-lightink">欣赏其他用户的精彩创作，获取灵感</p>
                </div>
                <a href="user-works.html" class="hidden md:flex items-center text-cinnabar hover:underline">
                    查看全部 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 作品1 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow scroll-reveal">
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <h3 class="text-lg font-song font-bold">秋江夜泊</h3>
                            <span class="text-xs bg-paper px-2 py-1 rounded-full">五律</span>
                        </div>
                        <div class="font-song text-ink mb-4 leading-relaxed">
                            寒江浸残月，孤舟泊浅滩。<br>
                            风摇芦苇乱，露湿客衣单。<br>
                            归梦随流水，乡音隔远山。<br>
                            披衣谁与语，星斗落前湾。
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                <span class="ml-2 text-sm text-lightink">张明远</span>
                            </div>
                            <div class="flex items-center space-x-4 text-lightink">
                                <span class="flex items-center"><i class="fa fa-heart-o mr-1"></i> 42</span>
                                <span class="flex items-center"><i class="fa fa-comment-o mr-1"></i> 8</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 作品2 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow scroll-reveal">
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <h3 class="text-lg font-song font-bold">蝶恋花·春思</h3>
                            <span class="text-xs bg-paper px-2 py-1 rounded-full">词</span>
                        </div>
                        <div class="font-song text-ink mb-4 leading-relaxed">
                            庭院深深深几许？<br>
                            柳絮纷飞，又惹春愁起。<br>
                            独倚栏杆风细细，<br>
                            天涯望断无归计。<br><br>
                            梦里常回年少地，<br>
                            燕语呢喃，犹记初相遇。<br>
                            岁月匆匆留不住，<br>
                            落花满地相思意。
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                <span class="ml-2 text-sm text-lightink">李清照(现代)</span>
                            </div>
                            <div class="flex items-center space-x-4 text-lightink">
                                <span class="flex items-center"><i class="fa fa-heart-o mr-1"></i> 78</span>
                                <span class="flex items-center"><i class="fa fa-comment-o mr-1"></i> 15</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 作品3 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow scroll-reveal">
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <h3 class="text-lg font-song font-bold">登黄鹤楼有感</h3>
                            <span class="text-xs bg-paper px-2 py-1 rounded-full">七绝</span>
                        </div>
                        <div class="font-song text-ink mb-4 leading-relaxed">
                            黄鹤楼头望楚天，<br>
                            长江万里入云烟。<br>
                            昔人已乘黄鹤去，<br>
                            唯有诗情留世间。
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                <span class="ml-2 text-sm text-lightink">王浩然</span>
                            </div>
                            <div class="flex items-center space-x-4 text-lightink">
                                <span class="flex items-center"><i class="fa fa-heart-o mr-1"></i> 36</span>
                                <span class="flex items-center"><i class="fa fa-comment-o mr-1"></i> 6</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-8 md:hidden">
                <a href="user-works.html" class="inline-block text-cinnabar hover:underline">
                    查看全部作品 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-ink text-rice py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 rounded-full bg-cinnabar flex items-center justify-center">
                            <span class="text-rice font-kai text-xl">古</span>
                        </div>
                        <span class="text-xl font-song font-bold">古韵新境</span>
                    </div>
                    <p class="text-rice/70 mb-6">让古典文学活起来，用现代方式感受传统文化魅力</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-wechat text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-instagram text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="index.html" class="text-rice/70 hover:text-cinnabar transition-colors">首页</a></li>
                        <li><a href="poems.html" class="text-rice/70 hover:text-cinnabar transition-colors">诗境</a></li>
                        <li><a href="classics.html" class="text-rice/70 hover:text-cinnabar transition-colors">典籍</a></li>
                        <li><a href="interactive.html" class="text-rice/70 hover:text-cinnabar transition-colors">互动体验</a></li>
                        <li><a href="creation.html" class="text-rice/70 hover:text-cinnabar transition-colors">作品创作</a></li>
                        <li><a href="about.html" class="text-rice/70 hover:text-cinnabar transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">互动功能</h4>
                    <ul class="space-y-3">
                        <li><a href="soundscape.html" class="text-rice/70 hover:text-cinnabar transition-colors">声景体验</a></li>
                        <li><a href="painting.html" class="text-rice/70 hover:text-cinnabar transition-colors">诗画创作</a></li>
                        <li><a href="dialogue.html" class="text-rice/70 hover:text-cinnabar transition-colors">古今对话</a></li>
                        <li><a href="user-works.html" class="text-rice/70 hover:text-cinnabar transition-colors">用户作品</a></li>
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">创作活动</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">联系我们</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-envelope-o mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">contact@guyunxinjing.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">+86 123 4567 8910</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">北京市海淀区中关村大街1号</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-rice/20 pt-8 text-center text-rice/50 text-sm">
                <p>© 2023 古韵新境 版权所有 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        $('#menu-toggle').click(function() {
            $('#mobile-menu').toggleClass('hidden');
        });
        
        // 字符计数功能
        $('#work-content').on('input', function() {
            const count = $(this).val().length;
            $('#char-count').text(`${count} 字`);
        });
        
        // 表单提交处理
        $('#creation-form').submit(function(e) {
            e.preventDefault();
            // 这里添加表单提交逻辑
            alert('作品提交成功，等待审核！');
            $(this)[0].reset();
            $('#char-count').text('0 字');
        });
        
        // 滚动显示动画
        function checkScroll() {
            const elements = document.querySelectorAll('.scroll-reveal');
            elements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;
                if (elementTop < window.innerHeight - elementVisible) {
                    element.classList.add('active');
                }
            });
        }
        
        // 初始检查和滚动监听
        window.addEventListener('scroll', checkScroll);
        window.addEventListener('load', checkScroll);
        checkScroll(); // 页面加载时立即检查
    </script>
</body>
</html>